<template>
    <div>
        <div class="header">
            <div class="title">
                <span>员工角色</span>
                <el-popover placement="right" :width="300" trigger="click">
                    <template #reference>
                        <el-icon :size="18" style="cursor: pointer;">
                            <QuestionFilled />
                        </el-icon>
                    </template>
                    <dl>
                        <!-- <dt>什么是员工角色?</dt> -->
                        <dd>1.普通员工只拥有首页、我的法务部、劳动合规模板库、个人中心四个页面， 给员工赋予特殊的角色之后，该员工将获得不同于普通员工的权限。</dd>
                        <!-- <dt>权限角色类型</dt> -->
                        <dd>2.人事拥有首页、我的法务部、我的企业、员工管理、劳动合规模板库权限。</dd>
                    </dl>
                </el-popover>
            </div>
            <el-button type="primary" @click="showDialog = true">添加权限</el-button>
        </div>
        <el-table :data="list" class="table" header-row-class-name="table-header">
            <el-table-column fixed prop="name" label="员工姓名" align="center" width="120" />
            <el-table-column prop="dept_name" label="部门">
                <template #default="scope">
                    <span>{{ scope.row.dept_name || '全部' }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="role_name" label="角色" align="center" width="200"></el-table-column>
            <el-table-column label="操作" align="center" width="250">
                <template #default="scope">
                    <el-button v-if="scope.row.role_id.includes('3')" link style="color: #0055a8;" @click="showDep(scope.row.id)">
                        <el-icon>
                            <Operation />
                        </el-icon>
                        配置管理部门
                    </el-button>
                    <el-button type="success" link @click="EditItem(scope.row)">
                        <el-icon>
                            <Edit />
                        </el-icon>
                        编辑
                    </el-button>
                    <el-button type="danger" link @click="DelItem(scope.row.id)">
                        <el-icon>
                            <Delete />
                        </el-icon>
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <ChooseUser v-model="showDialog" @submit-id="handleSuccess" />
        <el-dialog v-model="dialogVisible" title="配置管理部门" width="500">
            <Department v-if="dialogVisible" @tree-check="handleTreeCheck" />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="setDep">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="showPickRole" title="选择角色" width="500">
          <div class="role-list">
            <div class="role-item" v-for="(item, index) in roleList" :key="index" @click="item.isChecked = !item.isChecked">
              <img src="@/assets/users/icon0.png" v-if="index == 0" />
              <img src="@/assets/users/icon1.png" v-if="index == 1" />
              <dl>
                <dt><el-checkbox v-model="item.isChecked" class="custom-checkbox" @click.stop></el-checkbox>{{ item.title }}</dt>
                <dd>{{ item.content }}</dd>
              </dl>
            </div>
          </div>
          <template #footer>
              <div class="dialog-footer">
                  <el-button type="primary" @click="setUerRole">
                      确认
                  </el-button>
              </div>
          </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { DelHr, RoleList, SetHr, SetHrDep } from '@/api/user'
import ChooseUser from '@/components/ChooseUser.vue'
import Department from '@/components/Department.vue'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref, watch } from 'vue'

const showDialog = ref(false)
const dialogVisible = ref(false)
const list = ref([])
const roleId = ref(0)
const depId = ref('')
const showPickRole = ref(false)
const roleList = reactive([{
  title: '人事',
  content: '负责企业的人员信息管理、人员调度管理以及合同发起等',
  isChecked: false,
  value: '3'
},
// {
//   title: '业务管理',
//   content: '负责企业内部的文本管理、用印文件盖章',
//   isChecked: false,
//   value: '4'
// }
])

watch(
  () => showPickRole.value,
  val => {
    if(!val) {
      roleList.forEach((item: any) => {
        item.isChecked = false
      })
    }
  }
)

const handleSuccess = (id: number) => {
  roleId.value = id
  showPickRole.value = true
}

const handleTreeCheck = (data: any) => {
    depId.value = data.join(',')
}

const getList = () => {
    RoleList().then(res => {
        list.value = res.data
    })
}

const showDep = (id: number) => {
    dialogVisible.value = true
    roleId.value = id
}

const setDep = () => {
    SetHrDep({
        id: roleId.value,
        dept_ids: depId.value
    }).then(res => {
        dialogVisible.value = false
        ElMessage.success('设置成功')
        getList()
    })
}

const EditItem = (row: any) => {
    showPickRole.value = true
    roleId.value = row.id
    roleList.forEach((item: any) => {
        item.isChecked = row.role_id.includes(item.value)
    })
}

const DelItem = (id: number) => {
    DelHr({
        id: id
    }).then(res => {
        ElMessage.success('删除成功')
        getList()
    })
}

const setUerRole = () => {
  const roleVal = [] as string[]
    roleList.forEach((item: any) => {
      if(item.isChecked){
        roleVal.push(item.value)
      }
    })
   SetHr({
       id: roleId.value,
       role_id: roleVal.toString()
   }).then(res => {
       ElMessage.success('设置成功')
       getList()
       showPickRole.value = false
   })
}

onMounted(() => {
    getList()
})

</script>
<style scoped lang="scss">
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 5px;
    margin-bottom: 15px;

    .title {
        display: flex;
        align-items: center;

        span {
            font-size: 16px;
            margin-right: 5px;
        }


    }
}

.el-popper {
    dt {
        font-size: 15px;
        color: #333;
        margin-bottom: 5px;
    }

    dd {
        font-size: 12px;
        color: #666;
        margin-bottom: 10px;
    }
}

:deep(.el-table__header) {
    .table-header {
        th {
            font-size: 16px;
            background: #f3f8fb;
            height: 55px;
            color: #6f7070;
            font-weight: normal;
        }
    }
}

.role-list{


  .role-item{
    display: flex;
    padding: 20px;
    background-color: #eee;
    cursor: pointer;
    border-radius: 10px;
    margin-top: 10px;

    img{
      width: 50px;
      height: 50px;
    }

    dl{
      margin-left: 15px;

      dt{
        font-size: 16px;
        display: flex;
        align-items: center;
        color: #333;
      }

      dd{
        font-size: 14px;
        color: #666;
      }
    }
  }
}

.custom-checkbox {
  :deep(.el-checkbox__inner) {
    width: 20px;
    height: 20px;
    margin-right: 5px;

    &::after{
      height: 10px;
      top: 2px;
      left: 7px;
      border-width: 2px;
    }
  }
}
</style>